<template>
	<view class="rent_wrapper">
		<view class="content">
			<view class="input_box_1">
				<u--text text="租金" size="16" lineHeight="28" bold></u--text>
				<view class="input_i_1">
					<u--input placeholder="请输入" border="surround" v-model.trim="rentForm.start" type='number'
						size="mini" @input="changeMoney"></u--input>
				</view>
				<view class="" style="margin: 0 20rpx;">
					-
				</view>
				<view class="input_i_1">
					<u--input placeholder="请输入" border="surround" v-model.trim="rentForm.end" type='number'
						@input="changeMoney"></u--input>
				</view>
			</view>
			<view class="tag_wrp_1">
				<view class="item_1" v-for="(item, index) in rentList" :key="index">
					<text :class="['label_1',  rentalRange == `${item.start}-${item.end}` ? 'activ_change_color_1' : ''  ]"
						@click="activeMoney(item)">
						{{ item.start + ' - ' + item.end }}
					</text>
				</view>
			</view>
		</view>
		<view class="btn_wrp_1">
			<view class="btn_1">
				<u-button type="primary" size="large" ripple :custom-style="customStyle" text="重置"
					@click="rentReset"></u-button>
			</view>
			<view class="btn_1">
				<u-button type="primary" :custom-style="customStyle" ripple text="确定" @click="rentSubmit"
					color="rgb(240, 90, 35)" size="large"></u-button>
			</view>

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rentForm: {
					start: '',
					end: ''
				},
				rentalRange: "",
				isDisabled: true,
				curSort: "",
				rentList: JSON.parse(uni.getStorageSync('houseFilter')).rentList,
				sortList: JSON.parse(uni.getStorageSync('houseFilter')).sortList,
				customStyle: {
					width: "100%",
					color: 'red',
					marginLeft: "20px",
				},
			}
		},
		methods: {

			changeSort(item) {
				this.curSort = item.id
			},
			changeMoney() {
				if (this.rentForm.start == "" && this.rentForm.end == "") {
					this.rentalRange = `${this.rentForm.start} - ${this.rentForm.end}`;
					this.isDisabled = true
				} else {
					this.isDisabled = false
					this.rentalRange = ""
				}
			},
			activeMoney(item) {
				if (this.isDisabled) {
					this.rentalRange = `${item.start}-${item.end}`;
				}
			},
			rentReset() {
				this.rentForm = {
					start: '',
					end: ''
				}
				this.rentalRange = ""
				this.curSort = ''

				this.$emit('result')
			},

			rentSubmit() {
				var _index = this.rentalRange.indexOf('-');
				this.showRent = false;
				this.$emit("change", {
					start: this.rentForm.start || this.rentalRange.substr(0, _index),
					end: this.rentForm.end || this.rentalRange.substr(_index + 1, this.rentalRange.length),
					sort: this.curSort
				})
			},
		}
	}
</script>

<style scoped>
	.rent_wrapper {
		padding: 30rpx;
		margin-top: 30rpx;
	}

	.content {}

	.input_box_1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
		padding: 10rpx 0;
	}

	.input_i_1 {
		width: 200rpx;
		height: 70rpx;

	}

	.tag_wrp_1 {
		display: flex;

		flex-direction: row;
		flex-wrap: wrap;
	}

	.item_1 {
		flex-basis: 100%;
		/* max-width: calc(100% / 3); */
		flex-grow: 1;
		winth: 30%;
	}

	.label_1 {
		padding: 10rpx 13px;
		font-size: 25rpx;
		margin: 0 10%;
		color: rgb(102, 102, 102);
		background: rgba(115, 110, 110, 0.07);
		margin-top: 20rpx;
		margin-left: 20rpx;
		text-align: center;
	}

	.btn_wrp_1 {
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		margin: 20rpx 0;
		height: 200rpx;
	}

	.btn_1 {
		margin: 0 10rpx;
		flex: 1;
	}

	.activ_change_color_1 {
		background-color: rgb(240, 90, 35) !important;
		color: #fff !important;
	}
</style>